<template>
	<view class="details">
		<view class="swiper-wrap">
			<swiper class="swiper" :indicator-dots="false" circular autoplay :interval="5000" :duration="500"
				@change="changeBanner">
				<swiper-item v-for="(item, index) in info.images_data" :key="index">
					<view class="swiper-item" @click="handlePreviewImage(info.images_data, index)">
						<image :src="item.url" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view class="indicator-dot" :class="{'indicator-active': current === index}"
					v-for="(item, index) in info.images_data" :key="index"></view>
			</view>
		</view>

		<view class="info">
			<view class="info-card">
				<view class="title">{{info.title}}</view>
				<view v-if="info.desc" class="explain">{{info.desc}}</view>
				<view class="price">
					<text class="price-symbol">¥</text>
					<text class="price-num">{{info.day_rent | formatPrice($formatPrice, '')}} </text>
					<!-- <text class="price-unit" style="color: black;padding-left: 4rpx;">起</text> -->
					<text class="price-unit">/天租价</text>
				</view>
			</view>
			<view class="info-card flex flex-column" style="gap: 24rpx;">
				<view class="params-item" @click="openGuarantee({title: '平台保障', list: info.safeguard})">
					<view class="label">平台保障</view>
					<view class="content text-overflow-hidden-1">{{safeguard_title}}</view>
					<view class="iconfont icon-arrow-right"></view>
				</view>
				<view class="params-item" @click="openGuarantee({title: '发货说明', list: info.deliver})">
					<view class="label">发货说明</view>
					<view class="content text-overflow-hidden-1">{{deliver_title}}</view>
					<view class="iconfont icon-arrow-right"></view>
				</view>
				<view class="params-item" @click="openParams(info.params_data)">
					<view class="label">产品参数</view>
					<view class="content text-overflow-hidden-1">{{params_title}}</view>
					<view class="iconfont icon-arrow-right"></view>
				</view>
			</view>
			
			<view class="info-card" style="padding: ;">
				<view class="item-label">产品详情</view>
				<mp-html :content="info.content"></mp-html>
			</view>
		</view>

		<view class="footer-btns">
			<view class="iconfont icon-index" @click="goIndex"></view>
			<!-- 弹框显示企业微信二维码, 长按识别或长按保存 -->
			<!-- 如果无法实现,点图标跳转到公众号文章,文章显示企业微信二维码 -->
			<!-- <view class="iconfont icon-msg"></view> -->
			<!-- 点击按钮时需要判断登录条件 -->
			<button class="confirm-btn flex-1" @click="openLease">立即租赁</button>
			<!-- <button v-else class="submit-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即租赁</button> -->
		</view>

		<!-- 保障 -->
		<guarantee-popup ref="guarantee"></guarantee-popup>
		<!-- 产品参数 -->
		<params-popup ref="params"></params-popup>
		<!-- 租赁 -->
		<lease-popup ref="lease" :productGid="gId" :productInfo="info" @changeAgent="changeAgent"></lease-popup>
		<!-- 选择校园服务商 -->
		<com-cascader ref="cascader" @confirm="confirmSubmit"></com-cascader>
		
		
		<!-- 授权 -->
		<authorize-popup ref="authorize" @rejects="handleRejects" @success="openLease"></authorize-popup>
	</view>
</template>

<script>
	import GuaranteePopup from '../compoents/guarantee-popup.vue'
	import ParamsPopup from '../compoents/params-popup.vue'
	import LeasePopup from '../compoents/lease-popup.vue';
	import { mapState } from 'vuex'
	import { previewImage } from '@/utils/uploadImg.js'
	import formatPrice from '@/mixins/formatPrice.js';

	export default {
		components: {
			GuaranteePopup,
			ParamsPopup,
			LeasePopup
		},
		mixins:[formatPrice],
		data() {
			return {
				current: 0,
				gId: '', // 商品id
				info: {}, // 商品详情
				deliver_title: '', // 发货说明
				safeguard_title: '', // 保障说明
				params_title: '', // 产品参数
				userIdentityData: {}, // 认证服务商列表
			};
		},
		computed: {
			...mapState('login', ['is_login_verify', 'is_bind_phone', 'is_bind_wx', 'token'])
		},
		onLoad(options) {
			this.gId = options.gid
			this.getDetails()
			if (this.token) {
				this.getMyInfo()
			}
		},
		onReady() {
			// uni.$emit('show-authorize')
			// this.$refs.lease.open('03d98abd-9a4a-4f7e-9c2d-845c43a51171');
		},
		onShow() {
			if (this.$refs.cascader) {
				this.$refs.cascader.resetData()
			}
			if (this.token) {
				this.getUserIdentityList()
			}
		},
		onUnload() {
			uni.$off('show-authorize')
			uni.$off('hide-authorize')
		},
		onShareAppMessage() {
			console.log('分享数据', {
				title: this.info.title,
				imageUrl: this.info.images_data[0].url,
				path: `/pages/product/detail/detail?gid=${this.gId}`
			});
			return {
				title: this.info.title,
				imageUrl: this.info.images_data[0].url,
				path: `/pages/product/detail/detail?gid=${this.gId}`
			}
		},
		onShareTimeline() {
			console.log('分享数据', {
				title: this.info.title,
				imageUrl: this.info.images_data[0].url,
				path: `/pages/product/detail/detail?gid=${this.gId}`
			});
			return {
				title: this.info.title,
				imageUrl: this.info.title.images_data[0].url,
				path: `/pages/product/detail/detail?gid=${this.gId}`
			}
		},
		methods: {
			// 获取列表
			getUserIdentityList() {
				const params = {
					limit: 99999, // integer  页数 可选 示例值: 10
					page: 1, // integer  页码 可选 示例值: 1
					key: '', // string  可选 搜索：学校/服务商/联系人
					is_audit: '', // integer  可选 审核状态：null全部；-1驳回；0待审核；1已审核
				}
				this.$api.userIdentityListApi(params).then(res=> {
					const userIdentityList = res.data.map(item=> ({...item, apply_timestamp: new Date(item.apply_time).getTime()})).filter(item=> item.is_audit === 1)
					const maxTimestampObj = userIdentityList.reduce((maxObj, currentObj) => {
					  return currentObj.apply_timestamp > maxObj.apply_timestamp ? currentObj : maxObj;
					}, userIdentityList[0]);
					
					this.userIdentityData = maxTimestampObj
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 预览图片
			handlePreviewImage(lists, index) {
				const list = lists.map(item=> item.url)
				previewImage(list, index)
			},
			// 拒绝登录
			handleRejects() {
				console.log('拒绝登录');
			},
			// 获取我的信息
			getMyInfo() {
				this.$api.myInfoApi().then(res => {
					this.$store.commit('login/SET_USER_INFO', res.data)
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 获取手机号
			getPhoneNumber(event) {
				const params = {
					appid: this.$store.state.common.appid,
					code: event.detail.code
				}
				this.$api.wxPhoneLoginApi(params).then(res=> {
					uni.showToast({
						title: '登录成功',
					})
					this.$store.commit('login/SET_TOKEN', res.data.access_token)
					this.$store.commit('login/SET_USER_INFO', res.data)
					
					this.$refs.cascader.open();
				}).catch(err=> {
					console.log('err', err)
				})
			},
			// 获取产品详情
			getDetails() {
				this.$api.productDetailsApi(this.gId).then(res => {
					this.info = res.data
					this.info.images_data = JSON.parse(this.info.images_data)
					this.info.params_data = JSON.parse(this.info.params_data)
					this.safeguard_title = this.info.safeguard.map(item => item.title).join(' | ')
					this.deliver_title = this.info.deliver.map(item => item.title).join(' | ')
					this.params_title = this.info.params_data.map(item => item.title).join(' | ')
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 切换banner
			changeBanner(value) {
				const {
					current
				} = value.detail;
				this.current = current;
			},
			// 打开保障
			openGuarantee(data) {
				this.$refs.guarantee.open(data);
			},
			// 打开产品参数
			openParams() {
				this.$refs.params.open(this.info);
			},
			// 返回首页
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 选择租赁日期
			openLease() {
				if (this.token) {
					if (this.userIdentityData && Object.keys(this.userIdentityData).length) {
						this.confirmSubmit(this.userIdentityData.agent_gid)
						return
					}
					this.$refs.cascader.open();
					// return
					// this.$api.userIdentityListApi().then(res=> {
					// 	if (res.count === 0) {
					// 		// 打开认证服务商弹框
					// 		this.$refs.cascader.open();
					// 	} else {
					// 		// 打开选择代理商列表
					// 	}
					// }).catch(err=> {
					// 	console.log('err', err);
					// })
				} else {
					uni.$emit('show-authorize')
				}
			},
			confirmSubmit(value) {
				this.$refs.lease.open(value);
			},
			// 切换服务商
			changeAgent() {
				this.$refs.cascader.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.swiper-wrap {
			position: relative;
		}

		.swiper {
			height: 698rpx;

			.swiper-item {
				width: 100%;

				image {
					width: 100%;
				}
			}
		}

		.indicator-dots {
			position: absolute;
			left: 0;
			right: 0;
			gap: 18rpx;
			bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.indicator-dot {
				width: 50rpx;
				height: 12rpx;
				background-color: #FFFFFF;
			}

			.indicator-active {
				background: var(--gradient-color-vertical);
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 32rpx;
			padding: 24rpx 32rpx;
		}

		.info-card {
			padding: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
		}

		.title {
			font-size: 34rpx;
			font-weight: 400;
			line-height: 46rpx;
			text-align: left;
		}

		.explain {
			color: #999999;
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			text-align: left;
			padding-top: 8rpx;
		}

		.price {
			display: flex;
			padding-top: 20rpx;
			align-items: flex-end;
		}

		.price-symbol {
			font-size: 22rpx;
			font-weight: 600;
			line-height: 32rpx;
			text-align: left;
		}

		.price-num {
			font-size: 28rpx;
			font-weight: 700;
			line-height: 32rpx;
			text-align: left;
		}

		.price-unit {
			font-size: 14rpx;
			font-weight: 600;
			line-height: 24rpx;
			text-align: left;
			color: rgba(0, 0, 0, 0.5);
		}

		.params-item {
			display: flex;
			align-items: center;

			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			text-align: left;

			.label {
				color: #000000;
				flex-shrink: 0;
				padding-right: 32rpx;
			}

			.content {
				flex: 1;
				color: #999999;
				text-align: left;
			}

			.iconfont {
				margin-left: 32rpx;
				font-size: 18rpx;
			}
		}


		.tabs {
			display: flex;
			align-items: center;
			gap: 32rpx;
		}

		.item-tab {
			font-size: 34rpx;
			font-weight: 400;
			line-height: 46rpx;
			text-align: left;
			padding-bottom: 16rpx;
			color: rgba(0, 0, 0, 0.6);
		}

		.active-tab {
			color: #000000;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				left: 50%;
				right: 0;
				bottom: 0;
				width: 50%;
				height: 8rpx;
				border-radius: 999rpx;
				background-color: #000000;
				transform: translateX(-50%);
			}
		}

		.item-label {
			font-size: 34rpx;
			font-weight: 400;
			line-height: 46rpx;
			text-align: left;
			color: rgba(0, 0, 0, 1);
			padding-bottom: 16rpx;
		}

		.detials-imgs {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin: 0 -6rpx;

			.detials-item {
				width: 100%;
				line-height: 0;

				image {
					width: 100%;
					border-radius: 24rpx;
				}
			}
		}

		.detials-item {
			width: 100%;
			line-height: 0;

			image {
				width: 100%;
				border-radius: 24rpx;
			}
		}

		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

			display: flex;
			align-items: center;
			gap: 80rpx;

			.iconfont {
				color: #000000;
				font-size: 46rpx;
			}

			.submit-btn {
				flex: 1;
				margin: 0;
				padding: 0;
				height: 82rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);

				font-size: 34rpx;
				font-weight: 400;
				line-height: 82rpx;
				text-align: center;
				color: #FFFFFF;

				&::after {
					border: none;
				}
			}
		}
	}
</style>